import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface IButtonProps {
  onClick?: React.MouseEventHandler;
  // 类型
  primary?: boolean;
  secondary?: boolean;
  outline?: boolean;
  dashed?: boolean;
  link?: boolean;

  // 形状
  round?: boolean;
  noRadius?: boolean;
  fat?: boolean;

  // 尺寸
  xLarge?: boolean;
  large?: boolean;
  small?: boolean;
  xSmall?: boolean;

  // 宽度
  long?: boolean;
  short?: boolean;

  // 颜色
  success?: boolean;
  warn?: boolean;

  // 禁用状态
  disabled?: boolean;

  href?: string;

  className?: string;
  style?: React.CSSProperties;

  children?: React.ReactNode;
}

export const Button: React.SFC<IButtonProps> = (props: IButtonProps) => {
  const className = classNames({
    'button': true,
    'button-primary': props.primary,
    'button-secondary': props.secondary,
    'button-outline': props.outline,
    'button-dashed': props.dashed,
    'button-text': props.link,
    'button-round': props.round,
    'button-rectangle': props.noRadius,
    'button-fat': props.fat,
    'button-xl': props.xLarge,
    'button-lg': props.large,
    'button-sm': props.small,
    'button-xs': props.xSmall,
    'button-long': props.long,
    'button-short': props.short,
    'button-success': props.success,
    'button-warn': props.warn,
    'button-disabled': props.disabled,
  }, props.className);

  if (props.href) {
    return <a className={className} style={props.style} onClick={props.onClick} href={props.href}>{props.children}</a>;
  } else {
    return (
      <button
        className={className}
        style={props.style}
        onClick={props.onClick}
        disabled={props.disabled}
      >{props.children}</button>
    );
  }
};

Button.propTypes = {
  onClick: PropTypes.func,
  // 类型
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  outline: PropTypes.bool,
  dashed: PropTypes.bool,
  link: PropTypes.bool,

  // 形状
  round: PropTypes.bool,
  noRadius: PropTypes.bool,
  fat: PropTypes.bool,

  // 尺寸
  xLarge: PropTypes.bool,
  large: PropTypes.bool,
  small: PropTypes.bool,
  xSmall: PropTypes.bool,

  // 宽度
  long: PropTypes.bool,
  short: PropTypes.bool,

  // 颜色
  success: PropTypes.bool,
  warn: PropTypes.bool,

  // 禁用状态
  disabled: PropTypes.bool,

  href: PropTypes.string,
};
